<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>在线生成 QR Code</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="keywords"
	content="OSCHINA.NET 在线工具,ostools,jsbin,加密/解密，Markdown,less,java api,php api,node.js api,QR Code" />
<meta name="description"
	content="OSCHINA.NET在线工具,ostools为开发设计人员提供在线工具，提供jsbin在线 CSS、JS 调试，在线 Java API文档,在线 PHP API文档,在线 Node.js API文档,Less CSS编译器，MarkDown编译器等其他在线工具" />
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet"
	href="${rootPath }/common/resource/qrcode/basic.css?20120912"
	type="text/css" />
<script type="text/javascript"
	src='${rootPath }/common/resource/jquery-3.3.1.min.js'></script>

<link rel="stylesheet"
	href='${rootPath }/common/resource/bootstrap/css/bootstrap.min.css' />
<script src='${rootPath }/common/resource/bootstrap/js/bootstrap.min.js'></script>

</head>
<body>
	<!--     头部header开始    -->
	<%@ include file="/common/include/header.jsp"%>
	<div id="header">
		<div class="wrapper">
			<div id="mainSearch">

				<!-- Put the following javascript before the closing </head> tag. -->
				<style>
					.go_search {
						width: 300px;
					}
					
					.go_search .gsc-input td, .go_search .gsc-input tddiv {
						padding: 0 0 0 0;
						margin: 0 0 0 0;
						height: 23px;
					}
					
					.go_search .gsc-input input:focus {
						border: none;
					}
					
					.go_search .gsc-input input {
						border: none;
						height: 23px;
						width: 100%;
						padding: 0px;
						border: none;
						margin: 0px;
						height: auto;
						outline: none;
						-webkit-box-shadow: none;
						-moz-box-shadow: none;
						box-shadow: none;
						background-image:
							url(../img/google_custom_search_watermark.gif?20140625);
						background-color: rgb(255, 255, 255);
						background-position: 0% 50%;
						background-repeat: no-repeat no-repeat;
					}
					</style>

				<div class="go_search">
					<!-- Place this tag where you want the search box to render -->
				</div>
			</div>
			<div id="logo" class="texthidden"
				onclick="javascript:location.href='/'">
				<h1> </h1>
			</div>
		</div>
	</div>
	<!--     头部header结束    -->
	<script type="text/javascript" src="${rootPath }/common/resource/qrcode/tag_osc.js?date=201903010"></script>
	<div class="wrapper ad-wrap" style="margin-top: 15px">
		<script type="text/javascript" src="${rootPath }/common/resource/qrcode/tag.js?date=20140625"></script>
	</div>
	<style>
		.leftBar .title, .rightBar .title, .topBar .title {
			margin-bottom: 10px;
		}
		
		.bottomBar .title {
			margin: 10px 0;
		}
		
		.topBar input[type='submit'] {
			margin-left: 10px;
		}
		
		.OptDetail {
			text-align: center;
			margin-left: 30px;
		}
		
		.OptDetail li {
			width: 120px;
			margin: 5px 0px 10px 0px;
		}
		
		.OptDetail select {
			margin: 5px 0px 10px 0px;
			text-align: center;
		}
		
		#pwd {
			width: 110px;
		}
		
		#qrcode img {
			margin: auto;
		}
		
		.QRCodeDiv {
			border: 1px solid #ccc;
			width: 430px;
			height: 500px;
			background-color: #eee;
			text-align: center;
		}
		
		.QRWrapper {
			height: auto;
			display: inline-block;
			line-height: 500px;
		}
		
		.QRWrapper img {
			vertical-align: middle;
		}
	</style>
	<script type="text/javascript" src="${rootPath }/common/resource/qrcode/jquery.form-2.82.js"></script>
	<script type="text/javascript">
		$(document)
				.ready(
						function() {
							$("#qrcode_form").ajaxForm({
								success : function(json) {
									if (json == null)
										return;
									json = eval("(" + json + ")");
									if (json.msg) {
										alert(json.msg);
										return;
									}
									if (json[0])
										$("#result").val(json[0].text);
									else
										$("#result").val("解码失败");
								}
							});
							$("#zxing")
									.popover(
											{
												'title' : '条形码处理类库 ZXing',
												'content' : 'ZXing是一个开源Java类库用于解析多种格式的1D/2D条形码。目标是能够对QR编码、Data Matrix、UPC的1D条形码进行解码。 其提供了多种平台下的客户端包括：J2ME、J2SE和Android。',
												'placement' : 'bottom'
											});
						});
	</script>
	<div id="mainContent" class="wrapper">
		<div class="toolName">
			在线生成二维码(QR码) 
		</div>
		<div class="toolUsing clearfix">
			<div class="toolsTab  clearfix">
				<ul class="nav nav-tabs">
					<li class="active"><a href="${rootPath }/QrCode.htm" class="btn btn-primary" style="width: 80px;" >转QR码</a></li>
					<li><a href="${rootPath }/Encode.htm" class="btn btn-primary" style="width:  150px;" >二维码解码</a></li>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="topBar">
		 		<form action="${rootPath }/upload" enctype="multipart/form-data"
						method="post">
						请选择文件: <input type="file" name="file"> 
						<input type="submit"class="btn btn-primary" value="上传">
				</form>
				<form action="${rootPath }/Encode" method="post">
					<input type="submit" class="btn btn-primary" value="解码">
				</form>  
			</div>
			<div class="bottomBar">
				<div class="title">解码结果:</div>
				<textarea id="result"name="content" value="${sessionScope.content }">${sessionScope.content }</textarea>
			</div>
		</div>
	</div>

 
	 
	<script>
		function verifyEmail() {
			if (null == $("#advice_email").val().match(
					/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)) {
				$("#email_error").html(" email输入错误 ");
				$("#advice_email").focus();
			} else {
				$("#email_error").html("<i class='icon-ok'></i>");
				$("#advice_submit").removeAttr("disabled");
			}
		}
		$(document)
				.ready(
						function() {
							$("#advice_submit")
									.click(
											function() {
												$
														.post(
																"/action/advice/add_advice",
																{
																	tool_name : $(
																			"#tool_name_f")
																			.val(),
																	email : $(
																			"#advice_email")
																			.val(),
																	content : $(
																			"#advice_content")
																			.val(),
																	verifyCode : $(
																			"#verifyCode")
																			.val()
																},
																function(result) {
																	var m = eval('('
																			+ result
																			+ ')');
																	if ("ok" == m.msg) {
																		alert("谢谢您的建议，我们会参考您的建议使ostools变得更好！");
																		$(
																				'#advice')
																				.modal(
																						'hide');
																		$(
																				"#captcha_code")
																				.attr(
																						"src",
																						'/action/jsbin/captcha?'
																								+ new Date()
																										.getTime());
																	} else {
																		alert(m.msg);
																	}
																});
											});
						});
	</script>
 	<%@ include file="/common/include/footer.jsp"%>
</body>
</html>
